<script setup lang="ts">

import {PageTitle} from "../../hooks/utils/userType";
import {ref} from "vue";
import {UserBasicHtmlContent} from "../../hooks/utils/UserBasicHtmlContent";
import {useBasicInformationBorder} from "../../hooks/useBasicInformationBorder.ts";

const {title, types} =
    defineProps<{
      title: string
      types: PageTitle
    }>()

const content = ref<string>()
content.value = UserBasicHtmlContent(types)

const {To} = useBasicInformationBorder()

</script>

<template>
  <div class="basic-info-box">
    <div class="basic-title">
      <el-text class="title-text-size">{{ title }}</el-text>
      <div @click="To(types)" v-html="content"></div>
    </div>
    <div class="title-divider-size"/>
    <div class="test-height">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "../style/BasicInformation";

.test-height {
  height: auto;
}
</style>